import {Button,Table,Input} from 'antd'
import SelectProduct from './SelectProduct'
import {useEffect,useState} from 'react'
import {addGroupBuy,addGroupProduct,updateGroupBuy} from '../api/purchase'
interface Iprops{
  groupInfo:any
  setGroupInfo:any
  setCurrent:any
}
function AddGroupBuyProduct(props:Iprops) {
  const [showProduct,setShowProduct] = useState(false);
  const [selectProList,setSelectProList]=useState([])
  const [groupProList,setGroupProList] = useState<any>([])
  useEffect(()=>{
    const list = selectProList.map((item:any)=>{
      var obj = {...item,salePrice:item.price,rate:0.05,limitBuy:1,stock:999,order:0,productId:item.id};
      delete obj.id;
      return obj;     
    })
    setGroupProList(list)
  },[selectProList])
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'productName',
    
    },
    {
      title: '商品编码',
      dataIndex: 'productId',
    },
    {
      title: '商品价格',
      dataIndex: 'price',
    },
    {
      title: '商品促销价格',
      dataIndex: 'salePrice',
    },
    {
      title: '佣金比例',
      dataIndex: 'rate',
    },
    {
      title: '限购量',
      dataIndex: 'limitBuy',
    },
    {
      title: '库存',
      dataIndex: 'stock',
      render:(value:any,row:any,index:any)=>{
        
        return <Input style={{width:60}} value={groupProList[index].stock} onChange={(e)=>{
            const  list = groupProList;
            list[index].stock = e.target.value;
            setGroupProList([...list]);
        }} />
      }
    },
    {
      title: '展示顺序',
      dataIndex: 'order',
    },
    
  ]
  const selectTargetChange=(keys:any,rows:any)=>{
    console.log(keys,rows)
  }
  const done=async()=>{
    const group =  await  addGroupBuy(props.groupInfo)
    var list = groupProList.map((item:any)=>({...item,groupBuyId:group.data.data.insertId}))
    setGroupProList(list);
    var requestList= list.map((item:any)=>addGroupProduct(item))
    var results =  await Promise.all(requestList)
    var products = results.map((item:any)=>item.data.data.insertId)
    var  res = await updateGroupBuy({id:group.data.data.insertId,products:products.join(",")})
    if(res){
      props.setCurrent(2);
    }

  }
  return ( <div>
    <p style={{textAlign:'center'}}><Button onClick={()=>setShowProduct(true)}>+ 添加商品</Button></p>
    {showProduct&&<SelectProduct 
    selectProList={selectProList}
    setSelectProList={setSelectProList}
    setShowProduct={setShowProduct}/>}
     <Table
       style={{marginBottom:32,minHeight:320}} 
       rowKey="productId"
            size="small"
           rowSelection={{
            type:'checkbox',
            onChange:selectTargetChange
          }}
          columns={columns}
          dataSource={groupProList}  
          pagination={false}       
        ></Table>
        <p><Button onClick={()=>props.setCurrent(0)}>上一步：活动信息</Button>
          <Button type='primary' onClick={done}  >完成</Button>
        </p>
     {/* {JSON.stringify(props.groupInfo)} */}
     {/* {JSON.stringify(groupProList)} */}
  </div> );
}

export default AddGroupBuyProduct;